<template>
  <div class="main">
    <div class="top"></div>
    <div class="mid">
      <div class="word">修改密码</div>
      <el-form :model="form" style="width: 300px;">
        <el-form-item>
          <el-input v-model="username" placeholder="请输入身份证" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="password" type="password" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-form-item class="center">
          <el-button type="primary" @click="doChange" color="#DBEBE1">修改</el-button>
          <el-button @click="this.$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">

    </div>
  </div>
</template>

<script>
import {change} from '@/api/patient'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    doChange() {
      change({
        username: this.username,
        password: this.password
      }).then(res => {
        this.$router.go(-1)
      })
    }
  }
}
</script>

<style scoped>
.main {
  width: 100vw;
  height: 100vh;
  background: url(@/assets/11.jpg) no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}

.top {
  width: 100%;
  height: 110px;
}

.word {
  text-align: center;
  font-size: 40px;
  color: rgba(104, 152, 148, 0.5);
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mid {
  width: 330px;
  height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 40px 40px 40px 40px;
}

.bottom {
  width: 100%;
  height: 240px;
}
</style>